<template>
	<div id="shopCar">
		<div class="head">
			<span class="shopCar-T">购物车</span>
			<span class="edit">编辑</span>
		</div>
		<div class="contentBox">
			<ul>
				<li v-for="(item,idx) in shopCarLsit" :key="idx">
					<input type="checkbox" class="check" :checked="item.checked" @click="check(idx)" />
					<img :src="item.path" />
					<div class="right">
						<p class="name">{{item.name}}</p>
						<p class="color">{{item.color}}</p>
						<p class="circle"></p>
						<div class="footerBox">
							<span class="price">{{item.price}}</span>
							<input type="button" value="-" class="reduce" @click="reduce(idx)" />
							<span class="count">{{item.count}}</span>
							<input type="button" value="+" class="add" @click="add(idx)" />
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="settlement">
			<input type="checkbox" class="allCheck" :checked="checkAlled" @click="checkAll()" />
			<span class="allCheckText">全选</span>
			<span class="totalText">合计:</span>
			<span class="totalPrice">￥{{totalPrice}}</span>
			<input type="button" class="settlementBtn" value="结算" />
		</div>
	</div>
</template>

<script>
	export default {
		name: "shopCar",
		data() {
			return {
				checkAlled: false,
				totalPrice: 0,
				
				// count:'1',
				shopCarLsit: [{
						id: '1',
						count: 1,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price: 99,
						checked: false,
					},
					{
						id: '2',
						count: 1,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price: 199,
						checked: false,
					},
					{
						id: '3',
						count: 2,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price:199,
						checked: false,
					},
					{
						id: '4',
						count: 1,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price: 199,
						checked: false,
					},
					{
						id: '5',
						count: 1,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price: 199,
						checked: false,
					},
					{
						id: '6',
						count: 1,
						path: require('../../assets/img/kouhong.png'),
						name: '故宫口红•枫叶红',
						color: "枫叶红，哑光",
						price: 199,
						checked: false,
					}
				]
			}
		},
		methods: {

			check(idx) {
				var arr = []
				this.shopCarLsit[idx].checked = !this.shopCarLsit[idx].checked
				// console.log(this.shopCarLsit[idx].checked)
				this.shopCarLsit.forEach(item => {
					if (item.checked == true) {
						arr.push(item)
					}
				})
				if (arr.length == this.shopCarLsit.length) {
					this.checkAlled = true
				} else {
					this.checkAlled = false
				}
				this.totalPrice = 0
				this.shopCarLsit.forEach(item => {
					if (item.checked == true) {
						this.totalPrice = this.totalPrice + item.price * item.count
					}
				})
			},
			checkAll() {
				var flag = true
				this.checkAlled = !this.checkAlled
				this.shopCarLsit.forEach(item => {
					if (item.checked == false) {
						flag = false
						console.log(item)
					}
				})
				this.shopCarLsit.forEach(item => {
					if (flag == false) {
						item.checked = true
					} else {
						item.checked = !item.checked
					}
				})
				this.totalPrice = 0
				this.shopCarLsit.forEach(item => {
					if (item.checked == true) {
						this.totalPrice = this.totalPrice + item.price * item.count
					}
				})
			},
			reduce(idx) {
				if (this.shopCarLsit[idx].count > 1) {
					this.shopCarLsit[idx].count = this.shopCarLsit[idx].count - 1
				} else {
					this.shopCarLsit[idx].count = 1
				}
				this.totalPrice = 0
				this.shopCarLsit.forEach(item => {
					if (item.checked == true) {
						this.totalPrice = this.totalPrice + item.price * item.count
					}
				})
			},
			add(idx) {
				this.shopCarLsit[idx].count = this.shopCarLsit[idx].count + 1
				this.totalPrice = 0
				this.shopCarLsit.forEach(item => {
					if (item.checked == true) {
						this.totalPrice = this.totalPrice + item.price * item.count
					}
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	#shopCar {
		background: #FAF8F8;
		padding-bottom: 0.8rem;

		.head {
			background-color: #C30D23;
			display: flex;
			height: 0.88rem;

			.shopCar-T {
				font-size: 0.20rem;
				font-weight: bold;
				color: #FAFAFA;
				opacity: 1;
				margin: 0.5rem 0 0 1.58rem;
			}

			.edit {
				font-size: 0.12rem;
				color: #FFFCFC;
				opacity: 1;
				margin: 0.56rem 0 0 1.21rem;
			}
		}

		.contentBox {
			background: #FFFFFF;

			ul {
				li:nth-child(1) {
					margin-top: 0;
				}

				li {
					margin-top: 0.08rem;
					display: flex;

					.check {
						margin: 0.64rem 0 0 0.08rem;
					}

					img {
						width: 1.14rem;
						height: 1.14rem;
						margin: 0.16rem 0 0 0.12rem;
					}

					.right {
						margin: 0.16rem 0 0 0.12rem;
						display: flex;
						flex-direction: column;

						.name {
							font-size: 0.14rem;
							color: #333333;
							opacity: 1;
						}

						.color {
							font-size: 0.12rem;
							color: #999999;
							opacity: 1;
							margin-top: 0.08rem;
						}

						.circle {
							display: inline-block;
							width: 0.12rem;
							height: 0.12rem;
							background-color: #AD513A;
							border-radius: 50%;
							margin: 0.17rem 0 0 0.02rem;
						}

						.footerBox {
							display: flex;
							margin-top: 0.13rem;

							.price {
								font-size: 0.18rem;
								color: #C30D23;
								opacity: 1;
							}

							.reduce {
								width: 0.18rem;
								height: 0.18rem;
								background: #F7F7F7;
								opacity: 1;
								border: none;
								color: #808080;
								font-size: 0.12rem;
								margin-left: 0.61rem;
							}

							.add {
								width: 0.18rem;
								height: 0.18rem;
								background: #F7F7F7;
								opacity: 1;
								border: none;
								color: #808080;
								font-size: 0.12rem;
							}

							.count {
								display: inline-block;
								font-size: 0.12rem;
								color: #C30D23;
								opacity: 1;
								width: 0.18rem;
								height: 0.18rem;
								background: #F7F7F7;
								margin: 0 0.04rem;
							}
						}
					}
				}
			}
		}

		.settlement {
			height: 0.44rem;
			background-color: #FFFFFF;
			opacity: 1;
			position: fixed;
			bottom: 0.35rem;
			display: flex;

			.settlementBtn {
				width: 0.94rem;
				height: 0.44rem;
				background: #C30D23;
				opacity: 1;
				border: none;
				font-size: 0.14rem;
				color: #FAFAFA;
				opacity: 1;
				margin-left: 0.16rem;
			}

			.allCheck {
				width: 0.20rem;
				height: 0.20rem;
				background: #F2F2F2;
				border-radius: 50%;
				opacity: 1;
				margin: 0.12rem 0 0 0.25rem;
			}

			.allCheckText {
				font-size: 0.14rem;
				color: #333333;
				opacity: 1;
				margin: 0.12rem 0 0 0.20rem;
			}

			.totalText {
				font-size: 0.14rem;
				color: #333333;
				opacity: 1;
				margin: 0.12rem 0 0 0.60rem;
			}

			.totalPrice {
				display: inline-block;
				font-size: 0.18rem;
				font-weight: bold;
				color: #C30D23;
				opacity: 1;
				margin: 0.08rem 0 0 0.10rem;
				width: 0.7rem;
				text-align: center;
			}
		}
	}
</style>
